<template>
  <view class="create-page">
    <!-- 结果展示区域 -->
    <view class="result-content">
      <view class="left-image-box">
        <text>原图</text>
        <image v-if="userImage" :src="userImage" mode="aspectFit" class="result-image" @click="previewImage(userImage)" />
		<view v-show="!userImage" class="text-hint">
			上传照片创作音乐
		</view>
	  </view>
      <view class="right-image-box">
		  <view class="right-image-bar">
			<text>生成图</text>
		  	<view v-if="!aiImage" class="music-play-btn" @click="toPlay()">
		  	  播放
		  	</view>
		  </view>
        <image v-if="aiImage" :src="aiImage" mode="aspectFit" class="result-image" @click="previewImage(aiImage)" />
        <view v-show="!aiImage" class="text-hint">
        	AI 生成图片
        </view>
		<view v-if="isGenerating" class="loading-indicator">
          <u-icon name="loading" size="48" color="#3cc88c" />
          <text>正在生成......</text>
        </view>
      </view>
    </view>
	
	<!-- 上传区域 -->
	<view class="upload-box">
	  <view class="upload-content">
	    <cjx-upload :limit="1" v-model="fileList" @change="handleChange" />
	  </view>
	  <view class="user-input-text">
		 <textarea class="user-input"  @blur="bindTextAreaBlur" placeholder="请输入你的灵感，让AI为你创作歌曲" auto-height />
	  </view>
	  <!-- 生成设置 -->
	  <view class="user-set">
		  <!-- 音乐形式 -->
		  <view class="music-category">
		    <text>音乐形式</text>
		    <view class="music-category-list">
		      <view 
		        v-for="(item, index) in musicTypes" 
		        :key="index"
		        class="music-category-item"
		        :class="{ 'selected': item.selected }"
		        @click="selectItem(item, index, musicTypes)"
		      >
		        {{ item.name }}
		      </view>
		    </view>
		  </view>
		
		  <!-- 音乐语言 -->
		  <view class="music-category">
		    <text>音乐语言</text>
		    <view class="music-category-list">
		      <view 
		        v-for="(item, index) in musicLanguages" 
		        :key="index"
		        class="music-category-item"
		        :class="{ 'selected': item.selected }"
		        @click="selectItem(item, index, musicLanguages)"
		      >
		        {{ item.name }}
		      </view>
		    </view>
		  </view>
		
		  <!-- 生成设置 -->
		  <view class="music-category">
		    <text>生成设置</text>
		    <view class="music-category-list">
		      <view 
		        v-for="(item, index) in privacySettings" 
		        :key="index"
		        class="music-category-item"
		        :class="{ 'selected': item.selected }"
		        @click="selectItem(item, index, privacySettings)"
		      >
		        {{ item.name }}
		      </view>
		    </view>
		  </view>
	  </view>
	</view>
	
	<view class="upload-btn" @click="startGenerate">
	  开始生成
	</view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'

// 响应式数据
const fileList = ref([])
const userImage = ref('') //原始图片地址
const aiImage = ref('') // AI 生成的图片地址
const isGenerating = ref(false) // 控制生成过程的加载状态

// 内容生成设置分类
const musicTypes = ref([
  { name: '歌曲', selected: true },
  { name: '纯音乐', selected: false }
])

const musicLanguages = ref([
  { name: '中文', selected: true },
  { name: '英文', selected: false },
  { name: '日文', selected: false }
])

const privacySettings = ref([
  { name: '公开', selected: true },
  { name: '私密', selected: false }
])

// 点击分类项
const selectItem = (item, index, category) => {  
  if (!category || (!Array.isArray(category) && !category.value)) {
    console.error('Invalid category:', category)
    return
  }
  
  const items = Array.isArray(category) ? category : category.value
  items.forEach((i, idx) => {
    i.selected = idx === index
  })
  console.log('当前选中:', index, item.name)
}



// 查看大图
const previewImage = (url) => {
  if(url) {
    uni.previewImage({
      urls: [url],
      current: 0
    })
  }
}

// 上传文件变化处理
const handleChange = (files) => {
  console.log('新增上传文件:', files)
  if (files.length > 0) {
    userImage.value = files[0].path || files[0].url
  }
}

// 开始生成按钮
const startGenerate = () => {
  if (!userImage.value) {
    uni.showToast({
      title: '请先上传图片',
      icon: 'none'
    })
    return
  }
	
  isGenerating.value = true
  aiImage.value = '' // 清空旧生成图

  // 模拟生成过程（实际项目中调用API）
  setTimeout(() => {
    // 生成模拟图片地址（实际应替换为API返回的生成图地址）
	aiImage.value = '/static/images/fengjin.png'
    // aiImage.value = `https://picsum.photos/400/400?random=generated-${Date.now()}`
    isGenerating.value = false
  }, 0)
}

const toPlay = () =>{
	uni.navigateTo({
		url: '/pages/play/play'
	});
}
</script>

<style lang="scss">
.create-page {
  padding: 20rpx;
  background-color: #f8f8f8;
  
  // 上传区域
  .upload-box {
    position: relative;
    padding: 20rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    
	// 上传框框
    .upload-content {
      height: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f9f9f9;
      border-radius: 12rpx;
    }
	
	// 灵感文本框
	.user-input-text {
		background: #f8f8f8;
		height: 200rpx;
		margin: 20rpx 0;
		padding: 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	// 用户设置
	.user-set {
		.music-category {
			margin: 2rpx 0;
			padding: 15rpx 10rpx;
			display: flex;
			justify-content: space-between;
			.music-category-list {
				display: flex;
				.music-category-item {
					padding: 10rpx;
					margin: 0 5rpx;
					height: 40rpx;
					width: 100rpx;
					border-radius: 50rpx;
					text-align: center;
					border: 1rpx solid #4ccb1d;
				}
				.music-category-item.selected {
				  background-color: #3cc88c;
				  color: #fff;
				  border-color: #3cc88c;
				}
			}
		}
	}
  }

    // 提交按钮
    .upload-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      height: 88rpx;
      width: 100%;
      background-color: #3cc88c;
      font-size: 28rpx;
      font-weight: 500;
      color: #FFFFFF;
      box-shadow: 0 6rpx 16rpx rgba(60, 200, 140, 0.4);
      overflow: hidden;
      transition: all 0.3s ease;
    }
	.upload-btn:active {
	  transform:  translateY(-5rpx);
	  box-shadow: 0 3rpx 8rpx rgba(60, 200, 140, 0.3);
	}
	

  // 结果展示区域
  .result-content {
    display: flex;
    height: auto;
    margin-bottom: 30rpx;
    
	.left-image-box:first-child {
	  margin-right: 20rpx;
	}
	
	.right-image-bar {
		position: relative;
		z-index: 100;
		text {
			position: absolute;
		}
		// 播放按钮
		.music-play-btn {
			position: absolute;
			right: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 30%;
			font-size: 28rpx;
			font-weight: 500;
			color: #3cc88c;
			transition: all 0.3s ease;
		}
	}
	
    .left-image-box, .right-image-box {
	  position: relative;
      flex: 1;
      height: 600rpx;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .result-image {
        width: 100%;
        height: 110%;
        border-radius: 8rpx;
      }
      
	  .text-hint {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  text-align: center;
		  font-size: 15rpx;
		  height: 100%;
		  opacity: 0.5;
	  }
	  
      text {
		  position: absolute;
		  z-index: 100;
          display: block;
		  margin-bottom: 10rpx;
          font-size: 28rpx;
          color: #666;
      }
      
      .loading-indicator {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10rpx;
        border-radius: 20rpx;
        z-index: 100;
		width: 400rpx;
		height: 60rpx;
		backdrop-filter: blur(8rpx);
		background: #0000003e;
		border: 1rpx solid rgba(255, 192, 203, 0.289);
		box-shadow: 0 10rpx 30rpx rgba(246, 207, 207, 0.2);
		
		text{
			margin-top: 8rpx;
			color: #fff;
		}
		
      }
	  
    }
  }
}
</style>